<template>
	<view>
		<view class="fun-navigate"  >
			<view class="navigate-left">
				<view>头像</view>
				<view>
					<!-- <image class="avatr-img"  :src="user.avatarUrl" mode="aspectFit"></image> -->
					<image-cropper :iszoom="true" :src="tempFilePath"  @confirm="confirm"  @cancel="cancel"></image-cropper>
					
					<image @click="upload" :src="user.avatarUrl"  class="avatr-img"></image>
					<!--  注意这里支付宝一定要加下面的东东。我也不明白为什么，明明 在组件里都有了，还用在这里定义顺便也定义了crop-width和crop-height-->
					<!--  #ifdef MP-ALIPAY -->
					<canvas  id="myCanvas"  canvas-id="myCanvas" class="meslist_canvas" crop-width="200"  crop-height="200"></canvas>
					<!--  #endif-->
				</view>
			</view>
			<view class="navigate-right" @click="upload" >
				<text class="iconfont icon-gengduo1"></text>
			</view>
		</view>
		
		<view class="fun-navigate" @click="showHF(1)">
			<view class="navigate-left">
				<view>昵称</view>
				<view>{{user.nickName}}</view>
			</view>
			<view class="navigate-right" >
				<text class="iconfont icon-gengduo1"></text>
			</view>
		</view>
		
		<view class="fun-navigate" @click="changeSex">
			<view class="navigate-left">
				<view>性别</view>
				<view>{{user.sex | getSex}}</view>
			</view>
			<view class="navigate-right" >
				<text class="iconfont icon-gengduo1"></text>
			</view>
		</view>
		
		<view class="fun-navigate" @click="changeBirthday">
			<view class="navigate-left">
				<view>生日</view>
				<view>{{user.birthday ? user.birthday : '无'}}</view>
			</view>
			<view class="navigate-right" >
				<text class="iconfont icon-gengduo1"></text>
			</view>
		</view>
		
		<view class="fun-navigate" @click="showHF(2)">
			<view class="navigate-left">
				<view>职业</view>
				<view>{{user.uPosition ? user.uPosition : '无'}}</view>
			</view>
			<view class="navigate-right" >
				<text class="iconfont icon-gengduo1"></text>
			</view>
		</view>
		<view class="fun-navigate" @click="showAddress">
			<view class="navigate-left">
				<view>地址</view>
				<view>{{user.userAddress ? user.userAddress : '无'}}</view>
			</view>
			<view class="navigate-right" >
				<text class="iconfont icon-gengduo1"></text>
			</view>
		</view>
		
		<view class="fun-navigate" @click="showHF(4)">
			<view class="navigate-left">
				<view>学校</view>
				<view>{{user.schoolName ? user.schoolName : '无'}}</view>
			</view>
			<view class="navigate-right" >
				<text class="iconfont icon-gengduo1"></text>
			</view>
		</view>
		<view class="fun-navigate" >
			<view class="navigate-left">
				<view>邮箱</view>
				<view>{{user.email ? user.email : '无'}}</view>
			</view>
			<view class="navigate-right" >
				<text class="iconfont icon-gengduo1"></text>
			</view>
		</view>
		<view class="fun-navigate">
			<view class="navigate-left">
				<view>星座</view>
				<view>{{user.constellation ? user.constellation : '无'}}</view>
			</view>
			<view class="navigate-right" >
				<text class="iconfont icon-gengduo1"></text>
			</view>
		</view>
		<view class="fun-navigate" @click="showHF(3)">
			<view class="navigate-left">
				<view>签名</view>
				<view>{{user.motto ? user.motto : '设置个性签名让大家更加了解你吧！'}}</view>
			</view>
			<view class="navigate-right" >
				<text class="iconfont icon-gengduo1"></text>
			</view>
		</view>
		<view class="save-btn" @click="save">保存更改</view>
		<view class="log-out-btn" @click="logOut">退出登录</view>
		<selectAddress ref='selectAddress' splitStr="-" @selectAddress="successSelectAddress"></selectAddress>
		<mx-date-picker :show="showPicker" 
		:type="dataType" 
		:value="dataValue" 
		:show-tips="true" 
		:begin-text="'入住'" 
		:end-text="'离店'" 
		:show-seconds="true" 
		@confirm="ed" 
		@cancel="ed" />
		<hFormAlert v-if="isShowHF"  
		@confirm="confirmHF" @cancel="cancelHF"
		confirmColor="#FFEB3B"
		cancelColor="#ff3333"
		:textarea="isTextarea"
		:placeholder="placeholder"></hFormAlert>
		<mpopup ref="mpopup" :isdistance="true"></mpopup>  
	</view>
</template>

<script>
	import {User} from '@/model/user.js';
	import ImageCropper from "@/components/ling-imgcropper/ling-imgcropper.vue";
	import MxDatePicker from "@/components/mx-datepicker/mx-datepicker.vue";
	import hFormAlert from '@/components/h-form-alert/h-form-alert.vue';
	import selectAddress from '@/components/yixuan-selectAddress/yixuan-selectAddress.vue'
	import {UploadFile} from '@/model/uploadFile.js';
	import mpopup from '@/components/xuan-popup/xuan-popup.vue'
	import {utils} from '@/utils/utils.js';
	export default {
		data() {
			return {
				user:{},
				tempFilePath: "",
				cropFilePath: "",
				dataType:'rangetime',
				dataValue:"",
				showPicker:false,
				isShowHF:false,
				placeholder:"请输入",
				inputIndex:0,
				isTextarea:false,
				upTempFilePath:""
			}
		},
		components: {
		    ImageCropper,
			MxDatePicker,
			hFormAlert,
			selectAddress,
			mpopup
		 },
		onLoad() {
			this.user = this.$utils.getStorage("user")
		},
		filters:{
			getSex(sex){
				if(sex == 1){
					return '女'
				}
				if(sex == 2){
					return '男'
				}
				return '未知'
			}
		},
		methods: {
			async logOut(){
				let res = await User.logOut()
				if(!res == 200){
					uni.showToast({
						icon:'none',
					    title: res.message,
					    duration: 2000
					});
					return
				}
				this.$utils.removeStorage("token")
				this.$utils.removeStorage("user")
				uni.reLaunch({
					url:"../login/login"
				})
			},
			upload() {
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ["original", "compressed"], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ["album"], //从相册选择
					success: async (res) => {
						console.log(res)
						this.tempFilePath = res.tempFilePaths[0];
					},
				});
			},
			changeSex(){
				uni.showActionSheet({
				   itemList: ["男","女","未知"],
					success: (res) =>{
						switch (res.tapIndex){
							case 0:
								this.user.sex = 2
							break;
							case 1:
								this.user.sex = 1
							break;
							case 1:
								this.user.sex = 3
							break;
						}
					}
					
				});
			},
			confirm(e) {
				this.tempFilePath = "";
				this.cropFilePath = e.detail.tempFilePath;
				this.user.avatarUrl = this.cropFilePath
			},
			cancel() {
				this.tempFilePath = "";
			},
			changeBirthday(){
				this.dataType = "date"
				this.showPicker = true;
				let date = new Date()
				this.dataValue = date.format("yyyy/MM/dd")
			},
			ed(e) {//选择
				this.showPicker = false;
				if(e) {
					this.dataValue = e.value; 
					this.user.birthday = this.dataValue
					this.user.constellation = this.$utils.getAstro(e.date.getMonth() + 1, e.date.getDate()) + "座"
					console.log(e.date.getMonth() + 1, e.date.getDate())
					//选择的值
					console.log('value => '+ e.value);
					//原始的Date对象
					console.log('date => ' + e.date);
				}
			},
			async save(){
				if(this.cropFilePath){
					uni.showLoading({
						title:"文件上传中"
					})
					let res = await UploadFile.uploadFiles([{
							name:'files',
							uri:this.cropFilePath,
						}]
					)
					if(res.code != 200){
						this.$refs.mpopup.open({
							type:'err',
							content:'文件上传失败',
							timeout:1000,
							isClick:false
						});
						return
					}
					this.upTempFilePath = res.data.map(item=>{return item.fileUrl})[0]
					this.user.avatarUrl = this.upTempFilePath
				}
				let user = JSON.parse(JSON.stringify(this.user))
				Object.forEach(user,(item,i,key)=>{
					if(!item){
						delete user[key]
					}
				})
				delete user.createTime
				uni.showLoading({
					title:"修改中"
				})
				let upRes = await User.updateUserInfo(user)
				if(upRes.code != 200){
					this.$refs.mpopup.open({
						type:'err',
						content:'修改失败',
						timeout:1000,
						isClick:false
					});
					return
				}
				this.$refs.mpopup.open({
					type:'success',
					content:'修改成功',
					timeout:1000,
					isClick:false
				});
				this.$store.user = this.user
				this.$utils.removeStorage("user")
				this.$utils.setStorage("user",this.user)
				utils.setStorage("user",this.user)
			},
			showHF(id){
				this.isShowHF = true
				this.inputIndex = id
				switch(id){
					case 1:
						this.placeholder = "请输入昵称";
					break
					case 2:
						this.placeholder = "请输入职业";
					break
					case 3:
						this.isTextarea = true
						this.placeholder = "请输入签名";
					break
					case 4:
						this.placeholder = "请输入学校";
					break
				}
			},
			confirmHF(e){
				this.isShowHF = false
				switch(this.inputIndex){
					case 1:
						this.user.nickName = e.text;
					break
					case 2:
						this.user.uPosition = e.text;
					break
					case 3:
						this.isTextarea = false
						this.user.motto = e.text;
					break
					case 4:
						this.user.schoolName = e.text;
					break
				}
			},
			cancelHF(){
				this.isShowHF = false
				this.isTextarea = false
			},
			showAddress(){
				this.$refs.selectAddress.show()
			},
			successSelectAddress(address){ //选择成功回调
				console.log(address)
				this.user.userAddress = address
			}
		}
	}
</script>

<style>
	page{
		background-color: #F2F2F2;
	}
</style>
<style scoped lang="scss">
	.log-out-btn{
		border: 2rpx #F40 solid;
		text-align: center;
		width: 80vw;
		height: 80rpx;
		margin: 20rpx auto;
		line-height: 80rpx;
		font-size: 30rpx;
		color: #f40;
		border-radius: 20rpx;
	}
	.save-btn{
		text-align: center;
		width: 80vw;
		height: 80rpx;
		margin: 20rpx auto;
		line-height: 80rpx;
		font-size: 30rpx;
		color: #333;
		border-radius: 20rpx;
		background-color: $fun-theme-color;
		margin: 20rpx auto;
	}
	.fun-navigate{
		display: flex;
		margin: 10rpx 0rpx;
		justify-content: space-between;
		align-items: center;
		background-color: #FFF;
		padding: 20rpx 30rpx;
		.navigate-left{
			align-items: center;
			color: #333;
			display: flex;
			flex-direction: row;
			view{
				font-size: 30rpx;
				&:first-child{
					margin-right: 40rpx;
					text-align: left;
					// width: 200rpx;
				}
				&:last-child{
					width: 540rpx;
				}
			}
			.avatr-img{
				width: 100rpx;
				height: 100rpx;
				border-radius: 20rpx;
			}
		}
		.navigate-right{
			font-size: 30rpx;
			color: #B5B5B5;
		}
	}
	.meslist_canvas{
		position: fixed;
		top:0;
		width: 200px;
		height: 200px;
		visibility: hidden;
	}
</style>
